<template>
    <view class="my-container">
        <Header pageTitle="个人中心" />

        <view class="user-info">
            <view class="avatar-box">
                <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
            </view>
            <view class="info-box">
                <view class="username-role">
                    <text class="username">{{ userInfo.username }}</text>
                    <view class="roles-wrapper">
                        <text class="role">
                            {{ isManager ? '农场经理' : '农场员工' }}
                        </text>
                    </view>
                </view>
                <view class="phone-wrapper">
                    <image
                        class="phone-icon"
                        src="@/static/images/icons/phone.png"
                        mode="widthFix"></image>
                    <text class="phone">{{ userInfo.phone || '--' }}</text>
                </view>
            </view>
        </view>

        <view class="activity-section">
            <view class="section-title">我的活动</view>
            <view class="menu-list">
                <view class="menu-item" @click="navigateTo(`/pages/my/myFarming/myFarming?isManager=${isManager}`)">
                    <view class="icon-wrapper green">
                        <image
                            src="@/static/images/icons/touxiang1.png"
                            mode="widthFix"
                            style="width: 100%; height: 100%"></image>
                    </view>
                    <text class="menu-text">我的农事</text>
                    <text class="menu-desc">查看和管理农事记录</text>
                    <roc-icon-plus
                        type="fas"
                        name="angle-right"
                        :size="20"
                        color="#ccc"></roc-icon-plus>
                </view>
                <view
                    class="menu-item"
                    @click="navigateTo(isManager ? `/pages/my/taskManage/taskManagement?isManager=1` : `/pages/my/task/task?isManager=0`)">
                    <view class="icon-wrapper orange">
                        <image
                            src="@/static/images/icons/task.png"
                            mode="widthFix"
                            style="width: 100%; height: 100%"></image>
                    </view>
                    <text class="menu-text">{{ isManager ? '我发布的任务' : '我的任务' }}</text>
                    <text class="menu-desc">查看农事任务</text>
                    <roc-icon-plus
                        type="fas"
                        name="angle-right"
                        :size="20"
                        color="#ccc"></roc-icon-plus>
                </view>
            </view>
        </view>

        <view class="setting-section">
            <view class="section-title">设置</view>
            <view class="menu-list">
                <view class="menu-item" @click="navigateTo('/pages/login/changePassword')">
                    <view class="icon-wrapper orange">
                        <image
                            src="@/static/images/icons/task.png"
                            mode="widthFix"
                            style="width: 100%; height: 100%"></image>
                    </view>
                    <text class="menu-text">修改密码</text>
                    <roc-icon-plus
                        type="fas"
                        name="angle-right"
                        :size="20"
                        color="#ccc"></roc-icon-plus>
                </view>
                <view class="menu-item" @click="logout">
                    <view class="icon-wrapper orange">
                        <image
                            src="@/static/images/icons/task.png"
                            mode="widthFix"
                            style="width: 100%; height: 100%"></image>
                    </view>
                    <text class="menu-text">退出</text>
                    <roc-icon-plus
                        type="fas"
                        name="angle-right"
                        :size="20"
                        color="#ccc"></roc-icon-plus>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Header from '@/components/Header/index.vue'
import { mapState, mapGetters } from 'vuex'
import { logout } from '@/utils/api/user.js'

export default {
    components: {
        Header,
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo
        }),
        ...mapGetters(['isManager'])
    },
    onLoad() {
        console.log('个人中心页面加载完成')
        this.refreshUserInfo()
    },
    onPullDownRefresh() {
        this.refreshUserInfo().then(() => {
            setTimeout(() => {
                uni.stopPullDownRefresh()
            }, 1000)
        })
    },
    methods: {
        // 刷新用户信息
        async refreshUserInfo() {
            try {
                await this.$store.dispatch('fetchUserInfo', true)
            } catch (error) {
                console.error('刷新用户信息失败:', error)
                uni.showToast({
                    title: '获取用户信息失败',
                    icon: 'none',
                })
            }
        },
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            })
        },
        async logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            // 显示加载提示
                            uni.showLoading({
                                title: '退出中...',
                                mask: true
                            })
                            
                            // 调用退出登录接口
                            await logout()
                            
                            // 清除用户信息
                            this.$store.dispatch('clearUserInfo')
                            
                            // 隐藏加载提示
                            uni.hideLoading()
                            
                            // 跳转到登录页面
                            uni.reLaunch({
                                url: '/pages/login/login',
                            })
                        } catch (error) {
                            // 隐藏加载提示
                            uni.hideLoading()
                            
                            console.error('退出登录失败:', error)
                            
                            // 即使接口调用失败，也要清除本地用户信息并跳转
                            this.$store.dispatch('clearUserInfo')
                            uni.reLaunch({
                                url: '/pages/login/login',
                            })
                        }
                    }
                },
            })
        }
    },
}
</script>

<style lang="scss">
.my-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 100rpx;

    .user-info {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .avatar-box {
            margin-right: 30rpx;

            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
            }
        }

        .info-box {
            display: flex;
            flex-direction: column;

            .username-role {
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;

                .username {
                    font-size: 34rpx;
                    font-weight: 500;
                    color: #333;
                    margin-right: 10rpx;
                }

                .roles-wrapper {
                    display: flex;
                    align-items: center;

                    .role {
                        font-size: 24rpx;
                        color: #2eb57d;
                        background-color: #e8f5e9;
                        padding: 4rpx 10rpx;
                        border-radius: 4rpx;
                        display: inline-block;
                        margin-right: 10rpx;
                    }
                }
            }

            .phone-wrapper {
                display: flex;
                align-items: center;

                .phone-icon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 6rpx;
                }

                .phone {
                    font-size: 26rpx;
                    color: #999;
                }
            }
        }
    }

    .section-title {
        padding: 30rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
    }

    .activity-section,
    .setting-section {
        background-color: #fff;
        margin-bottom: 20rpx;

        .menu-list {
            .menu-item {
                display: flex;
                align-items: center;
                padding: 30rpx;
                border-bottom: 1px solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .icon-wrapper {
                    width: 36rpx;
                    height: 36rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20rpx;
                    border-radius: 10rpx;

                    &.green {
                        background-color: #e8f5e9;
                        color: #2eb57d;
                    }

                    &.orange {
                        background-color: #fff3e0;
                        color: #ff9800;
                    }

                    .iconfont {
                        font-size: 32rpx;
                    }
                }

                .menu-text {
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #666666;
                    flex: 1;
                }

                .menu-desc {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #888888;
                    margin-right: 20rpx;
                }

                .arrow {
                    font-size: 30rpx;
                    color: #ccc;
                }
            }
        }
    }

    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        display: flex;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .iconfont {
                font-size: 44rpx;
                color: #999;
                margin-bottom: 6rpx;
            }

            .tab-text {
                font-size: 24rpx;
                color: #999;
            }

            &.active {
                .iconfont,
                .tab-text {
                    color: #2eb57d;
                }
            }
        }
    }
}
</style>
